import React from 'react'
import './index.css'

export default class Footer extends React.Component {
  checkAll = e => {
    this.props.handleCheckAll(e.target.checked)
  }

  clearDoneTodos = () => {
    this.props.clearDoneTodos()
  }

  render() {
    const {todos} = this.props

    const doneCount = todos.reduce((pre, todo) => {
      return pre + (todo.done ? 1 : 0)
    }, 0)

    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" checked={todos.length === doneCount} onChange={this.checkAll}/>
        </label>
        <span>
          <span>已完成 {doneCount}</span> / 全部 {todos.length}
        </span>
        <button className="btn btn-danger" onClick={this.clearDoneTodos}>清除已完成任务</button>
      </div>
    )
  }
}
